<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>云存</title>
    <!--//手机端自适应-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <!--//手机端自适应-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="css/index.css">

    <!--弹窗-->
    <script src="js/mDialogMin.js"></script><!--弹窗JS-->
    <link href="css/dialog.css" rel="stylesheet">
    <script>
        //手机自适应
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {

                    } else {
                        docEl.style.fontSize = '20px'
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        function register() {
            Dialog.init('<input type="text" placeholder="账号" id = "users" style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/><input type="password" id = "pwd1" placeholder="密码"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/><input type="password" placeholder="确认密码" id = "pwd2"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/><input type="mail" placeholder="邮箱" id="email" style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                title: '用户注册',
                button: {
                    确定: function () {
                        var user_name = document.getElementById("users").value;
                        var pwd1 = document.getElementById("pwd1").value;
                        var pwd2 = document.getElementById("pwd2").value;
                        var email = document.getElementById("email").value;
                        if (user_name.length < 3) {
                            Dialog.init('用户名不能小于2位', 1000);
                        } else {
                            if (pwd1 == pwd2) {
                                $.post("./api/register.php",{
                                    "user":user_name,
                                    "pwd":pwd1,
                                    "email":email
                                },function (data){
                                    let data_json = JSON.parse(data)
                                    Dialog.init(data_json['msg'])
                                })
                            } else {
                                Dialog.init('两次密码不相同', 1000);
                            }
                        }
                        Dialog.close(this);
                    },
                    关闭: function () {
                        Dialog.close(this);
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="login">
    <h1>登录 云存</h1>
    <form method="post" action="login/login.php">
        <input type="text" name="user" placeholder="用户名" required="required"/>
        <input type="password" name="password" placeholder="密码" required="required"/>
        <button type="submit" class="btn btn-primary btn-block btn-large">登录</button>
        <button type="button" style="margin-top: 10px" onclick="register()" class="btn btn-primary btn-block btn-large">注册</button>
    </form>
</div>
</body>
</html>